<template>
  <el-dialog
    title="分享"
    :visible.sync="dialogVisible"
    width="40%"
    >
    <span>
      <ul>
        <li>
          <h3>访问连接</h3>
          <div style="display: flex">
            <EInput style="width: 90%;margin-right: 5%"></EInput>
            <EButton :title="'复制'" :color="'info'"></EButton>
          </div>
        </li>
        <li>
           <h3>连接二维码</h3>
          <div style="display: flex">
             <el-image style="margin-left: -10px">
              <div slot="error" class="image-slot">
                <QRcode :link="'https://www.baidu.com'"></QRcode>
              </div>
            </el-image>
            <span>扫一扫，手机打开演示链接</span>
          </div>
        </li>
      </ul>
    </span>
  </el-dialog>
</template>

<script>
/*eslint-disable*/
import EInput from '../InputBox/index.vue';
import EButton from '../ButtonBox/index.vue';
import QRcode from "../QRcode/index";
export default {
    name: "Dialog",
    data(){
      return{
        dialogVisible: false,
      }
    },
  props: {
      title: {
        type: String,
        default: ""
      },
      color:{
        type: String,
        default: ""
      }
    },
  methods: {
      changeVisible(){
        this.dialogVisible=true;
      },
    },
    components:{
      EInput,
      EButton,
      QRcode
    },
}
</script>

<style scoped>
  h3{
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    font-weight: normal;
  }
ul{
  padding: 0;
}
  li{
    list-style: none;
  }
</style>
